<!DOCTYPE HTML>

<html>
    <head>
        <title>¿Qué hacemos hoy?</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.dropotron.min.js"></script>
        <script src="js/jquery.scrolly.min.js"></script>
        <script src="js/jquery.onvisible.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>
        <script src="js/prefixfree.min.js"></script>
        <!--datepicker-->
        <script src="js/jquery.js"></script>
        <script src="js/jquery.datetimepicker.js"></script>
        <!--datepicker-->
        <script src="js/eventos.js"></script>
        <noscript>
        <link rel="stylesheet" href="css/skel.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-desktop.css" />
        <link rel="stylesheet" href="css/style-noscript.css" />
        <link rel="stylesheet" href="css/eventos.css" />
        </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
    </head>
    <body class="homepage">
        <!-- Header -->
        <div id="header" style="padding: 10% 0 0 0!important;">

            <!-- Nav -->    
            <nav id="nav">
                <ul>
                    <li><a href="index.html">Inicio</a></li>
                    <li>
                        <a>Categorias</a>
                        <ul>
                            <li><a href="#">Música</a></li>
                            <li><a href="#">Cultural</a></li>
                            <li><a href="#">Infantil</a></li>
                            <li><a href="#">Informativo</a></li>
                            <li><a href="#">Cine</a></li>
                            <li><a href="#">Teatro</a></li>
                            <li><a href="#">Fiesta</a></li>
                        </ul>
                    </li>
                    <li><a href="eventos.html">Buscar Evento</a></li>
                    <li><a href="#">Empresas</a>                       
                        <ul>
                            <li><a href="creaEmpresa.html">Registro Empresa</a></li>
                            <li><a href="creaEvento.html">Crear Evento</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Iniciar Sesi&oacute;n  &hellip;</a>
                        <ul>
                            <li><a href="login3.html">Empresas</a></li>
                            <li><a href="login3.html">Usuarios</a></li>

                        </ul>
                    </li>

                </ul>
            </nav>

            <div class="wrapper" style="padding: 0; width: 980px; margin: auto; border-radius: 8px; background: transparent; font-weight: 500;">
                <h1><a id="logo">B&uacute;squeda de Eventos</a></h1>
                <hr />

                <div style="width: 100%; padding: 1%; overflow: hidden;">
                    <div style="overflow: hidden;">
                        <div style="float: left;">
                            <p style="text-align: right;"> 
                                <label for="categL" class="labelEventos">Categor&iacute;a del Evento: </label>
                                <select id="categL" class="selectEventos">
                                    <option value="0" label="Seleccione"></option>
                                    <option value="1" label="Música"></option>
                                    <option value="2" label="Cultural"></option>
                                    <option value="3" label="Infantil"></option>
                                    <option value="4" label="Informativo"></option>
                                    <option value="5" label="Cine"></option>
                                    <option value="6" label="Teatro"></option>
                                    <option value="7" label="Fiesta"></option>
                                </select>
                            </p>
                            <p style="text-align: right;"> 
                                <label for="lugarL" class="labelEventos">Lugar del Evento: </label>
                                <select id="lugarL" class="selectEventos">
                                    <option value="0" label="Seleccione"></option>
                                    <option value="1" label="San José"></option>
                                    <option value="2" label="Alajuela"></option>
                                    <option value="3" label="Cartago"></option>
                                    <option value="4" label="Heredia"></option>
                                    <option value="5" label="Guanacaste"></option>
                                    <option value="6" label="Puntarenas"></option>
                                    <option value="7" label="Limón"></option>
                                </select>
                            </p>
                        </div>
                        <div style="float: right;">
                            <p style="text-align: right;"> 
                                <label for="datetimepicker" class="labelEventos">Fecha del Evento: </label>
                                <!--datepicker-->
                                <input type="text" value="" id="datetimepicker"/>
                                <!--datepicker-->
                            </p>
                            <p style="text-align: right;"> 
                                <label for="tituloL" class="labelEventos">T&iacute;tulo del Evento: </label>
                                <input type="text" id="tituloL"/>
                            </p>
                        </div>
                    </div>
                    <div style="overflow: hidden;">
                        <p style="text-align: center;"> 
                            <input type="button" onclick="buscarEventos()" value="Buscar" class="buttonBuscar"/> 
                        </p>
                    </div>
                </div>
            </div>

            <!-- Banner -->
            <section id="banner">
                <header>
                    <h2>Resultado de la b&uacute;squeda</h2>

                </header>
            </section>

            <!-- Carousel -->
            <section class="carousel" style="background: #f0f4f4; color: #5b5b5b;">
                <div class="reel">

                    <article>

                        <a href="images/evento1.jpg" class="image featured"><img src="images/evento1.jpg" alt="" /></a>
                        <header>
                            <h3><a href="#event">Titulo del Evento</a></h3>
                        </header>
                        <p>Curso de fotografía del 1 al 3 de Julio</p>							
                    </article>

                    <article>
                        <a href="#event" class="image featured"><img src="images/evento2.jpg" alt="" /></a>
                        <header>
                            <h3><a href="#event">Fiesta a toda hora</a></h3>
                        </header>
                        <p>Descripci&oacute;n</p>							
                    </article>

                    <article>
                        <a href="#event" class="image featured"><img src="images/evento3.jpg" alt="" /></a>
                        <header>
                            <h3><a href="#event">HobbieCon</a></h3>
                        </header>
                        <p>Descripci&oacute;n</p>							
                    </article>

                    <article>
                        <a href="#event" class="image featured"><img src="images/evento4.jpg" alt="" /></a>
                        <header>
                            <h3><a href="#event">Eventos Artisticos</a></h3>
                        </header>
                        <p>Descripci&oacute;n</p>							
                    </article>
                    <!--funcion administrativa para anadir eventos cuando sea necesario, dinamicamente-->

                </div>
            </section>
        </div>
        <!-- Main -->

        <!-- Features -->

        <!-- Footer -->
        <div id="footer">
            <div class="container">
                <div class="row">

                </div>
            </div>
        </div>
    </body>
    <!--datepicker-->
    <script>
        $('#datetimepicker').datetimepicker({
            lang: 'de',
            i18n: {
                de: {
                    months: [
                        'Enero', 'Febrero', 'Marzo', 'Abril',
                        'Mayo', 'Junio', 'Julio', 'Agosto',
                        'Septiemnbre', 'Octubre', 'Noviembre', 'Diciembre'
                    ],
                    dayOfWeek: [
                        "Dom", "Lun", "Mar", "Mie",
                        "Jue", "Vie", "Sab",
                    ]
                }
            },
            timepicker: true,
            format: 'd/m/Y-H:i'
        });
    </script>
    <!--datepicker-->
</html>